<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品发布情况</title>
    <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/echarts/5.1.1/dist/echarts.js}"></script>
</head>
<body>
    <input type="hidden" id="flagId" th:value="${flag}"/>
    <input type="hidden" id="titleId" th:value="${title}"/>

    <div id="container" style="width: 700px;height: 400px"></div>
    <script type="text/javascript">
        //3.在此定义两个数组，用于存储图形所需的数据
        const names = [];
        const values = [];

        const flag = $("#flagId").val();
        const title = $("#titleId").val();
        $.ajax({
            type:'post',
            url:'/echarts/getCommodityPublish',
            data:{flag},
            dataType:'json',
            success:function (data) {
                var length = data.length;
                for (var i = 0; i<length;i++) {
                    if(data[i]['name'] !== null) {
                        names.push(data[i]['name'])
                    }
                    if(data[i]['value'] !== null) {
                        values.push(data[i]['value']);
                    }
                }
                getChart();
            },
            error:function(error){
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });

        // 绘制图表
        function getChart(){
            //1.获取容器dom元素
            const dom = document.getElementById("container");
            //2.实例化echart对象
            const charts = echarts.init(dom);
            charts.hideLoading();
            //4.设定配置
            const option = {
                title: {
                    //4.1添加标题文本
                    text: title,
                    x:'center'
                },
                //4.2添加提示组件
                tooltip: {
                    show:true,
                    trigger:'item'
                },
                legend: {
                    //4.3定义图例的显示内容
                    show:false
                },
                xAxis: {
                    //4.4 定义x轴数据
                    data: names
                },
                yAxis: {},
                series: [{
                    name: title,
                    type: 'bar', //4.5 指定图表的类型
                    data: values,//4.6 指定图表的数据
                    itemStyle:{
                        borderRadius: [6, 6, 0, 0],
                        color:function(){
                            if(flag == "today"){
                                return "#5470c6";
                            } else if(flag == "onOffer"){
                                return "#91cc75";
                            } else if(flag == "sellOut"){
                                return "#fac858";
                            } else if(flag == "soldOut"){
                                return "#ee6666";
                            }
                        }
                    }
                }]
            };
            //5.使用定义好的配置项显示数据
            charts.setOption(option);
            charts.hideLoading();
        };
    </script>
</body>
</html>